<!doctype html>
<html lang="en">
  <head>
    {{ partial "head.html" . }}
  </head>

  <body
    class="dark:bg-navbar-bg-dark bg-navbar-bg flex flex-col items-center text-base text-black dark:text-white"
  >
    {{ partial "header.html" . }}
    <main class="relative flex w-full max-w-[1920px]">
      <!-- Sidebar -->
      <div
        style="scroll-behavior: smooth;"
        x-data
        x-init="$nextTick(() => {
          const container = $el; // The div with overflow
          const item = document.getElementById('sidebar-current-page')
          if (item) {
              const containerTop = container.scrollTop;
              const containerBottom = containerTop + container.clientHeight;

              const itemTop = item.offsetTop - container.offsetTop;
              const itemBottom = itemTop + item.offsetHeight;

              // Scroll only if the item is out of view
              if (itemBottom > containerBottom - 200) {
                  container.scrollTop = itemTop - (container.clientHeight / 2 - item.offsetHeight / 2);
              }
          }
      })"
        class="bg-background-toc dark:bg-background-toc fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto md:sticky md:top-16 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[320px]"
        :class="{ 'hidden': ! $store.showSidebar }"
      >
        <!-- Gray backdrop on small screens -->
        <div
          class="fixed bg-black/50 md:hidden"
          x-show="$store.showSidebar"
          @click="openSidebar = false"
          x-transition.opacity
        ></div>
        <div
          class="bg-background-toc dark:bg-background-toc z-50 w-full p-3 md:block md:w-[300px]"
        >
          <!-- Collapse button for small screens -->
          <button class="my-4 md:hidden" @click="$store.showSidebar = false">
            <span class="icon-svg"
              >{{ partialCached "icon" "arrow_left_alt" "arrow_left_alt" }}</span
            >
            Back
          </button>
          <!-- Top nav buttons appear here on sm width -->
          <div class="flex flex-col gap-2 md:hidden mb-4">
            <button
              @click="open = false"
              class="topbar-button open-kapa-widget w-full flex items-center gap-2"
            >
              <span>Ask&nbsp;AI</span>
              <span class="icon-svg">
                {{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
              </span>
            </button>
            <div class="topbar-button w-full flex items-center gap-2" id="search-bar-container">
               {{ partialCached "search-bar.html" "-" }}
            </div>
            {{ partial "contact-support-button.html" .}}
            <button
              aria-label="Theme switch"
              id="theme-switch"
              class="topbar-button flex items-center"
              x-data="{ theme: localStorage.getItem('theme-preference') }"
              x-init="$watch('theme', value => {
                    localStorage.setItem('theme-preference', value);
                    document.firstElementChild.className = value;
                  })"
              @click="theme = (theme === 'dark' ? 'light' : 'dark')"
            >
              <span class="icon-svg icon-sm dark:hidden"
                >{{ partialCached "icon" "icons/sun.svg" "sun" }}
              </span>
              <span class="icon-svg icon-sm hidden dark:block">
                {{ partialCached "icon" "icons/moon.svg" "moon" }}
              </span>
            </button>
          </div>
          <!-- Actual Sidebar Content -->
          {{ block "left" . }}
            {{ partial "sidebar/mainnav.html" . }}
            {{ partial "sidebar/sections.html" . }}
          {{ end }}
        </div>
      </div>

      <!-- Main content -->
      <div
        {{ if ne .Params.sitemap false }}data-pagefind-body{{- end }}
        class="dark:bg-background-dark w-full min-w-0 bg-white p-8"
      >
        {{ block "main" . }}
        {{ end }}
      </div>
    </main>

    <footer class="relative z-10 w-full">
      {{ partialCached "footer.html" . }}
    </footer>

    {{/* Load the YouTube player if the page embeds a YouTube video */}}
    {{ with .Store.Get "youtube" }}
      {{ partial "youtube-script.html" . }}
    {{ end }}
  </body>
</html>
